<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天天生鲜-商品列表</title>
<link rel="shortcut icon" href="images/copylogo.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/goods.css">
</head>

<body>
	<div id="login_info">
		<!-- 头部  -->
		<div class="header_con">
			<div class="header">
				<div class="welcome fl">欢迎来到天天生鲜</div>
				<div class="fr">
					<div class="login_info fl">
						<span v-if="nickName != ''">欢迎：<em>{{nickName}}</em></span>
						<!-- <em v-else>{{nickName}}</em>  -->
					</div>
					<div class="login_btn fl">
						<a v-if="nickName == ''" href="/user/login.html">登录</a> <span>
							| </span> <a target="_blabk" href="/user/register.html">注册</a>
					</div>
					<div class="user_link fl">
						<span> | </span><a href="user.html">用户中心</a> <span> | </span><a
							href="cart.html">我的购物车</a> <span> | </span><a
							href="../order/order.html">我的订单</a>
					</div>
				</div>
			</div>
		</div>

		<!-- 搜素框 -->
		<div class="search_bar clearfix">
			<a href="index.html" class="logo fl"><img src="images/logo.png"></a>
			<div class="search_con fl">
				<form>
					<input type="text" class="input_text fl" name="key_words"
						placeholder="搜索商品"> <input type="submit"
						class="input_btn fr" value="搜索">
				</form>
			</div>
			<div class="guest_cart fr">
				<a href="front/cart.html" class="cart_name fl">我的购物车</a>
				<div class="goods_count fl" id="show_count">{{goodsCount}}</div>
			</div>
		</div>
	</div>

	<!-- 全部商品分类 -->
	<div class="navbar_con">
		<div class="navbar clearfix">
			<!-- 动态下拉框 -->
			<div class="subnav_con fl">
				<h1 class="fl">全商品分类</h1>
				<span></span>
				<ul class="subnav">
					<li><a href="#model01" class="fruit">新鲜水果</a></li>
					<li><a href="#" class="sealfood">海鲜水产</a></li>
					<li><a href="#" class="meet">猪牛羊肉</a></li>
					<li><a href="#" class="egg">禽类蛋品</a></li>
					<li><a href="#" class="vegetables">新鲜蔬菜</a></li>
					<li><a href="#" class="ice">速冻食品</a></li>
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="index.html">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">手机生鲜</a></li>
				<li class="interval">|</li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>

	<!-- 面包屑导航 -->
	<div class="breadcrumb" id="breadcrumb">
		<a href="javascript:void(0)">全部分类</a> <span>&gt;</span> <a
			href="javascript:void(0)" id="type_name"></a>
	</div>

	<div id="app">
		<!-- 商品展示区域-->
		<div class="main_wrap clearfix">
			<!-- 新品推荐 -->
			<div class="l_wrap fl clearfix">
				<div class="new_goods">
					<h3>新品推荐</h3>
					<ul>
						<li><a href="#"><img src="images/goods/goods003.jpg"></a>
							<h4>
								<a href="#">牛奶草莓</a>
							</h4>
							<div class="prize">￥16.80</div></li>
						<li><a href="#"><img src="images/goods/goods009.jpg"></a>
							<h4>
								<a href="#">海南帝王蕉</a>
							</h4>
							<div class="prize">￥99.00</div></li>
					</ul>
				</div>
			</div>
			<!-- 热门类型查询 -->
			<div class="r_wrap fr clearfix">
				<div class="sort_bar">
					<a href="javascript:void(0);" id="normal" class="type active">默认</a>
					<a href="javascript:void(0);" id="price" class="type ">价格</a> <a
						href="javascript:void(0);" id="manUse" class="type ">人气</a>
				</div>
				<ul class="goods_type_list clearfix show1">
					<li v-for="good in goods"><a
						:href="'details.html#' + good.gno + '&' + typeName"
						target="_blank"><img :src="good.pic"></a>
						<h4>
							<a :href="'details.html#' + good.gno + '&' + typeName"
								target="_blank">{{good.gname}}</a>
						</h4>
						<div class="operate">
							<span class="prize">&yen;{{good.price}}</span> <span class="unit">{{good.weight}}/{{good.unit}}</span>
							<a href="javascript:void(0)" class="add_goods" title="加入购物车"
								@click="addCart(good.gno)"></a>
						</div></li>
				</ul>
				<!-- 分页栏-->
				<div class="pagenation">
					<ul>
						<li v-for="i in total"><a href="javascript:void(0)"
							@click="findByPage(i)" class="active" v-if="i == pageNo">{{i}}</a>
							<a href="javascript:void(0)" @click="findByPage(i)" v-else>{{i}}</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- 版权所有 -->
	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a> <span> | </span> <a href="#">联系我们</a> <span>
				| </span> <a href="#">招聘广告</a> <span> | </span> <a href="#">友情链接</a>
		</div>
		<p>CopyRight &copy; 2019 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
		<p>电话：0734-8355998 湘ICP备16015987号</p>
	</div>
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/axios.js"></script>
	<script type="text/javascript" src="js/check.js"></script>
	<script type="text/javascript" src="js/qs.js"></script>

	<script>
//热门查询动态样式
//给我们热门类型查询做点击事件
$(".type").on("click",function(){
	//默认查询方式 
	var type = "id";
	//移除原来的active的样式
	$(".type").removeClass("active");
	//获取此时点击的对象的文本是什么
	var check = $(this).html();
	//判断
	if(check == "默认"){
		$("#normal").addClass("active");
	}
	if(check == "价格"){
		$("#price").addClass("active");
		type = "gprice"
	}
	if(check == "人气"){
		$("#manUse").addClass("active");
		type = "gsales"
	}
})

var tno;
var page = 1;
var rows = 5;

var vm = new Vue({
	el:"#app", // 对应div的id，即这个vue的作用域
	data: {
		typeName: "",
		goods: {},  // 商品信息
		total: 0,  // 总记录数
		pageNo: 1 // 当前页数
	},
	methods: {
		findByPage: function(idx) {
			page = idx;
			this.pageNo = idx;
			axios.post("goods/findByPage", qs.stringify({tno:tno, page:page, rows:rows})).then(result => {
				this.goods = result.data;
			})
		},
		addCart: function(gno) {
			if (!login_info.$data.loginId) { // 说明没有登录
				alert("请先登录...");
				location.href="/user/login.html";
				return;
			}
			
			let flag = 0;
			// 判断该商品是否已经存在 
			let lcarts = login_info.$data.carts;
			// 默认发送的格式是json格式，需要用qs转化成form表达提交的字符串拼接的格式
			if (flag == 0) {
				axios.post("cart/add", qs.stringify({num:1, gno:gno, mno:login_info.$data.loginId}))
				.then(result => {
					let data = $.trim(result.data);
					if (data > 0) {
						login_info.$data.goodsCount = login_info.$data.goodsCount + 1; // 购物车商品种类+1
						
						// 将新添加的对象加入到购物车中
						let newObj = {};
						newObj.cno = data;
						newObj.gno = gno;
						login_info.$data.carts.push(newObj);
						alert("加入购物车成功....");
					} else {
						alert("加入购物车失败，请稍后重试...");
					}
				 })
			 }
		}
	},
	mounted:function(){ //数据挂载之前，相当于jquery中的$(function(){})，页面加载完成
		// 同时发送多个请求
		axios.all([getGoodsInfo()]).then(axios.spread((fn1) => { // fn1第一个函数的返回值  fn2是第二个函数的返回值
			this.goods = fn1.data.goods;
			this.total = Math.ceil(fn1.data.total / rows);
			this.typeName = $("#type_name").text();
		}))
	}
})

//获取首页商品信息
function getGoodsInfo() {
	var hash = decodeURI(location.hash);  // #1&新鲜水果
	if (hash == "" || hash.indexOf("&") <= 0) {
		location.href="index.html";
	}
	
	hash = hash.replace("#", "").split("&");
	tno = hash[0];
	$("#type_name").text(hash[1]);
	
	return axios({
		url:"goods/findByFirst",
		method:"get",
		params:{tno:tno, page:page, rows:rows}
	})
}
</script>
</body>
</html>